<template>
	<!-- 车辆轨迹查询 -->
	<div class="content" v-if="!is_detail">
		<div class="content-top">
			车辆管理_车辆信息查询
		</div>
		<div class="car-search">
			<el-form :inline="true" class="demo-form-inline">
				<div>
					<el-form-item style="margin: 10px 28px!important;" label="车牌号码">
						<el-input style="width: 260px;" clearable v-model="car_licensePlateNumber" placeholder="车牌号码"></el-input>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="车主姓名">
						<el-input style="width: 260px;" clearable v-model="car_chineseName" placeholder="车主姓名"></el-input>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" v-if="type == 0" label="企业名称">
						<el-input style="width: 260px;" placeholder="企业名称"></el-input>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="所属企业">
						<el-select  v-model="car_enterpriseId" clearable placeholder="请选择">
							<el-option v-for="item in enter_list" :key="item.id" :label="item.enterpriseName" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item style="margin: 10px 0px!important;">
						<el-button type="primary" @click='search' icon="el-icon-search">搜索</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<div style="height: 500px;margin: 0 20px 20px 20px;border: 1px solid #B8BECC;" id="container"></div>
		<div class="content-table content-table2">
			<el-table :data="tableData"  show-header stripe style="width: 100%;">
				<el-table-column prop="licensePlateNumber" label="车牌号" >
				</el-table-column>

				<el-table-column prop="chineseName" label="车主姓名">
				</el-table-column>
				<el-table-column prop="mobileNum" label="车主联系电话" >
				</el-table-column>
				<el-table-column prop="vehicleType" label="车型" >
					<template slot-scope="scope">
						<span v-if="scope.row.vehicleType == item.value" v-for='item in dict.vehicleType'>{{item.type}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="soc" label="剩余电量SOC" >
				</el-table-column>
				<!-- <el-table-column prop="batteryCode" label="车辆状态" width="200">
				</el-table-column> -->

				<el-table-column label="查看">
					<template slot-scope="scope">
						<template v-if='has_edit'>
							<el-button @click="showdetail(scope.row)" type="text" size="small">查看详情</el-button>
						</template>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size="limit" layout="prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
	<VehicleDetail @showList='show_list' :id='id' v-else></VehicleDetail>
</template>

<script>
	import VehicleDetail from '@/components/vehicle/VehicleDetail.vue'
	let _this;
	export default {
		components:{
			VehicleDetail:VehicleDetail
		},
		props:['power'],
		data() {
			return {
				flag: 0,
				id: 'id',
				status: '',
				car_licensePlateNumber: '',
				car_chineseName: "",
				car_enterpriseId: '',
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				dict: '',
				has_edit: false,
				is_detail:false,
				gdmap: '',
				type:'',
				enter_list:[],
				vin:[],
				vin_list:[],
			}
		},
		created() {
			_this = this;
		},
		mounted() {
			this.type = localStorage.getItem('type');
			if(this.type == 0){
				this.get_enter_list();
			}
			this.init();
			this.check_power();
			this.get_dict();
		},
		methods: {
			//关闭详情
			show_list(){
				this.is_detail = false;
				this.get_list();
			},
			//搜索按钮
			search(){
				this.page = 1;
				this.get_list();
			},
			//获取企业列表
			get_enter_list(){
				this.$axios.post(this.$global.serverIp + 'jianeng-admin/sysEnterprise/findPage', {
						"limit": "1000",
						"page": "1",
					})
					.then(function(res) {
						if (res != '') {
							_this.enter_list = res.data.list;
						}
					})
			},
			//关闭详情
			show_list(){
				this.is_detail = false;
				setTimeout(function(){
					_this.init();
				},100 );  
			},
			//显示详情
			showdetail(row) {
				this.id = row.id;
				this.is_detail = true;
			},
			//将车辆列表中的经纬度显示在地图上
			show_point(list) {
				var len = list.length;
				this.gdmap.clearMap();
				for (var i = 0; i < len; i++) {
					if (list[i] == null) continue;
					// 创建一个 icon
					var endIcon = new AMap.Icon({
						size: new AMap.Size(41, 61),
						image: require('@/assets/img/icon_car_bule.png'),
						imageSize: new AMap.Size(41, 61),
						// imageOffset: new AMap.Pixel(10, 10)
					});
					var marker = new AMap.Marker({
						position: new AMap.LngLat(list[i].longitude, list[i].latitude),
						icon: endIcon,
						offset: new AMap.Pixel(-20, -59) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					});
					this.gdmap.add(marker);
				}
			},
			//初始化地图 ，调用获取车辆列表
			init() {
				
				var map = new AMap.Map('container', {
					zoom: 11, //级别
					center: [120.69889, 27.993148], //中心点坐标
				});
				this.gdmap = map;
				this.get_list();
			},
			//获取权限
			check_power() {
				this.power.forEach(function(element) {
					if (element.permissionName.indexOf("详情") != -1) _this.has_edit = true;
				});
			},
			//获取字典
			get_dict() {
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
					.then(function(res) {
						if (res != '')
							_this.dict = res.data;
						console.log(_this.dict);
					})
			},
			//获取车辆列表
			get_list() {
				this.$axios.post(this.$global.serverIp + 'vehicle/vehicle/vehicleList', {
						"limit": this.limit + "",
						"page": this.page + "",
						"paginationFlag": true,
						"limit": this.limit + "",
						"page": this.page + "",
						"paginationFlag": true,
						"licensePlateNumber":this.car_licensePlateNumber,
						"chineseName":this.car_chineseName,
						"enterpriseId":this.car_enterpriseId
					})
					.then(function(res) {
						console.log(res);
						if (res != '') {
							// _this.tableData = res.data.list;
							_this.total = res.data.totalCount;
							_this.page = res.data.currPage;
							_this.vin = [];
							for(var i=0;i<res.data.list.length;i++){
								_this.vin.push(res.data.list[i].vin);
							}
							_this.get_SOC(res.data.list);
							// _this.show_point(_this.tableData);
						}

					})

			},
			get_SOC(list){
				this.$axios.post(this.$global.serverIp + 'vehicleExec/vehicleStatistics/findStatusAndLocationByVins', _this.vin)
					.then(function(res) {
						console.log(res);
						if (res != '') {
							_this.vin_list = res.data;
							for(var i=0;i<list.length;i++){
								if(_this.vin_list[i].vehicleStatus != null){
									list[i].soc = _this.vin_list[i].vehicleStatus.soc;
								}else{
									list[i].soc = '未知';
								}
								if(_this.vin_list[i].locationStatus != null){
									list[i].longitude = _this.vin_list[i].locationStatus.longitude;
									list[i].latitude = _this.vin_list[i].locationStatus.latitude;
								}else{
									list[i].longitude = 0;
									list[i].latitude = 0;
								}
							}
							_this.tableData = list;
							_this.show_point(_this.tableData);
						}
				
					})
				
			},
			show_point(list) {
				var self = this;
				var len = list.length;
				this.gdmap.clearMap();
				for (var i = 0; i < len; i++) {
					if (list[i].longitude == 0) continue;
					// 创建一个 icon
					var endIcon = new AMap.Icon({
						size: new AMap.Size(41, 61),
						image: require('@/assets/img/icon_car_bule.png'),
						imageSize: new AMap.Size(41, 61),
						// imageOffset: new AMap.Pixel(10, 10)
					});
					var marker = new AMap.Marker({
						position: new AMap.LngLat(list[i].longitude, list[i].latitude),
						icon: endIcon,
						offset: new AMap.Pixel(-20, -59) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					});
					// var carWindow = new AMap.InfoWindow({
					// 	offset: new AMap.Pixel(0, -60),
					// 	size: new AMap.Size(120, 70),
					// });
					var s = "车牌：" + list[i].licensePlateNumber + "<br>剩余电量：" + list[i].soc +
						' %';
					// carWindow.setContent(s);
					// carWindow.open(_this.gdmap, marker.getPosition());
					marker.setLabel({
						offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
						content: "<div class='info'>" + s + "</div>", //设置文本标注内容
						direction: 'top' //设置文本标注方位
					});
					// var longtitude = list[i].longtitude;
					// var latitude = list[i].latitude;
					// var name = list[i].name;
			
					// AMap.event.addListener(marker, 'click', function(e) {
					// 	self.$router.push({
					// 		path: '/MapDriver',
					// 		query: {
					// 			position: longtitude + ',' + latitude,
					// 			name: name
					// 		}
					// 	});
					// });
					this.gdmap.add(marker);
				}
			},
			//页码方法
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			//换页方法
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
		},


	}
	import '@/assets/css/common.css'
</script>
<style>
	.amap-info-content{
		font-size: 12px!important;
		padding: 0 0 0 5px!important;
	}
	.amap-marker-label{
		border: none!important;
	}
</style>
